{{extend name="index/index" /}}
{{block name="main"}}

<!--main content start-->
<section id="main-content">
    <section class="wrapper">
        <!-- page start-->
        <div class="row">
            <div class="col-lg-12">
                <section class="panel">
                    <header class="panel-heading">
                        用户列表
                    </header>
                    <form class="navbar-form navbar-left" role="search" method="" action="{{:url('/user')}}">
                        <div class="form-group">
                            <input type="text" class="form-control " id="mySearch" name="nickname" placeholder="请输入用户名">
                        </div>
                        <button class="btn btn-default search-btn">查找</button>
                    </form>
                    <table class="table table-striped border-top table-advance table-hover" id="sample_1">
                        <thead>
                        <tr class="text-center">
                            <th class="hidden-phone">ID</th>
                            <th class="hidden-phone">姓名</th>
                            <th class="hidden-phone">上次登录时间</th>
                            <th class="hidden-phone">手机号码</th>
                            <th class="hidden-phone">状态</th>
                            <th class="hidden-phone">操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        {{volist name='list' id='v' key='k' }}
                        <tr class="odd gradeX center">

                            <td class="hidden-phone ">{{$v.id}}</td>
                            <td class="hidden-phone " data-user="{{$v.id}}">{{$v.nickname}}</td>
                            <td class="hidden-phone">{{:date('Y-m-d H:i:s',$v.last_login_time)}}</td>
                            <td class="hidden-phone ">{{$v.tel}}</td>
                            <td class="center hidden-phone">
                                <button type="button" data-id="{{$v['id']}}" data-status="{{$v['status']}}"
                                        class=" status-btn btn btn-round btn-sm {{$v.status == 1?'btn-info':'btn-warning'}} ">
                                    {{$v.status == 1?'已激活':'已禁用'}}
                                </button>
                            </td>
                            <td class="hidden-phone">
                                <a class="btn btn-primary btn-round btn-sm show-btn" data-toggle="modal"
                                   href="#myModal1" data-id="{{$v['id']}}">查看用户信息</a>
                                <a class="btn btn-success btn-round btn-sm edit-btn" data-toggle="modal"
                                   href="#myModal2" data-id="{{$v['id']}}">修改用户信息</a>
                                <a class="btn btn-danger btn-round btn-sm del-btn" data-toggle="modal" href="#myModal4"
                                   data-id="{{$v['id']}}">删除用户</a>
                                <a class="btn btn-default btn-round btn-sm" href="{{:url('/UserImg/'.$v['id'])}}"
                                   data-id="{{$v['id']}}">用户照片管理</a>
                            </td>
                        </tr>


                        {{/volist}}

                        </tbody>
                    </table>


                    {{$list->render()}}


                    <div class="panel-body">

                        <!-- Modal1 -->
                        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title">用户信息</h4>
                                    </div>
                                    <div class="modal-body">

                                        <table class="table table-advance">
                                            <thead>
                                            <tr>
                                                <th></th>
                                                <th colspan="2"></th>

                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>姓名</td>
                                                <td id="name"></td>
                                                <td rowspan="4">
                                                    <img src="/static/admin/img/default.jpg" width="100" id="icon"
                                                         class="img-rounded .img-responsive">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>上次登录时间</td>
                                                <td id="lastlogin"></td>

                                            </tr>
                                            <tr>
                                                <td>手机号</td>
                                                <td id="tel"></td>

                                            </tr>
                                            <tr>
                                                <td>状态</td>
                                                <!--<td colspan="2">Larry the Bird</td>-->
                                                <td id="status"></td>
                                            </tr>
                                            </tbody>
                                        </table>


                                    </div>
                                    <div class="modal-footer">
                                        <button data-dismiss="modal" class="btn btn-default" type="button">Close
                                        </button>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- modal1 -->
                        <!-- Modal2 -->
                        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title">编辑用户信息</h4>
                                    </div>
                                    <div class="modal-body">

                                        <form class="form-horizontal" role="form" id="myForm">
                                            <div class="form-group">
                                                <label for="inputName" class="col-lg-2 control-label">用户名</label>
                                                <div class="col-lg-6">
                                                    <input type="text" class="form-control" id="inputName"
                                                           name="nickname" maxlength="30">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="radioSex" class="col-lg-2 control-label">性别</label>
                                                <div class="col-lg-6">
                                                    <label class="checkbox-inline">
                                                        <input type="radio" name='sex' id="radioSex1" value="1"> 男
                                                    </label>
                                                    <label class="checkbox-inline">
                                                        <input type="radio" name='sex' id="radioSex2" value="2"> 女
                                                    </label>

                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label for="exampleInputFile" class="control-label col-lg-2">头像</label>
                                                <div class="col-lg-5 col-lg-offset-1">
                                                    <label for="inputFile">
                                                        <img src="/static/admin/img/avatar1.jpg" id="myIcon" width="100"
                                                             class="img-rounded .img-responsive">
                                                    </label>
                                                    <p>点击更换头像</p>
                                                </div>

                                                <div class="col-lg-1" style="display: none">
                                                    <input type="file" id="inputFile" class="btn btn-primary"
                                                           name="pic">
                                                </div>
                                            </div>
                                        </form>

                                    </div>
                                    <div class="modal-footer">
                                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭
                                        </button>
                                        <button class="btn btn-success save-btn" type="button">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- modal2 -->


                        <!-- Modal -->
                        <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title">请注意</h4>
                                    </div>
                                    <div class="modal-body">
                                        <h3>
                                            您确定要删除该用户吗?
                                        </h3>


                                    </div>
                                    <div class="modal-footer">
                                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭
                                        </button>
                                        <button class="btn btn-danger dodel-btn" type="button" id="del-btn"> 确认</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- modal -->


                    </div>
                </section>
            </div>
            <!-- page end-->
        </div>
    </section>
</section>

{{/block}}
{{block name='myjs'}}

<script>

    // 设置提示泡弹框参数
    toastr.options = {
        closeButton: true,//是否显示关闭按钮
        progressBar: true,//实现显示计时条
        timeOut: "3000",//自动关闭时间
        positionClass: "toast-bottom-left"//提示位置
        // toast-top-full-width 顶端，宽度铺满整个屏幕
        // toast-top-right  顶端右边
    };

    //  触发删除用户操作
    $('.del-btn').click(function () {
        var id = $(this).attr('data-id');
        $('#del-btn').attr('data-id', id);

    });
    $('.dodel-btn').click(function () {
        var id = $(this).attr('data-id');
        $(this).attr("data-dismiss", 'modal');
        var obj = $("[data-id=" + id + "]").parents('tr');
        delAjax(id, obj);
        obj.remove();
    });


    //  触发查询单用户操作
    $('.show-btn').click(function () {
        var id = $(this).attr('data-id');
        showAjax(id);
    });


    // 触发编辑用户操作
    $('.edit-btn').click(function () {
        var id = $(this).attr('data-id');
        $(".save-btn").attr('data-id', id);
        $("#inputName").val('');
        $("#inputFile").removeAttr('data-img')
        // $("#InputPwd2").val('');

        editAjax(id);
    });
    // 保存表单信息
    $('.save-btn').click(function () {

        var id = $(".save-btn").attr('data-id');
        var puts = $('#myForm input').serialize();
        var info = 'id=' + id + '&' + puts;
        var iconSave = $("#inputFile").attr('data-img');
        if (iconSave) {
            data = info + '&icon=' + iconSave;
        } else {
            data = info;
        }
        updateAjax(data, id);

        $(this).attr("data-dismiss", 'modal');

        $("[data-user=" + id + "]").text($("#inputName").val());

    });


    // 执行删除AJAX
    function delAjax(id, obj) {
        $.ajax({
            type: 'delete',
            url: '/user/' + id,
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    toastr.success(data.info);
                    // 将该tr行删除
                    // obj.remove();
                } else {
                    toastr.warning(data.info, 'FBI WARNING: ');
                }
            },
            error: function () {
                toastr.error('AJAX执行失败!!');
            }
        });
    }

    // 执行查询单条AJAX
    function showAjax(id) {
        $.ajax({
            type: 'get',
            url: '/user/' + id,
            dataType: 'json',
            success: function (data) {


                if (data.status) {
                    // toastr.success('成了,id为' + id);
                    $('#name').html(data.data.nickname);
                    $('#tel').html(data.data.tel);
                    // 判定状态
                    if (data.data.status == 1) {

                        $('#status').html('激活');
                    } else {
                        $('#status').html('禁用');
                    }
                    // 判定头像
                    if (data.data.icon) {
                        $('#icon').attr('src', data.data.icon);
                    } else {
                        $('#icon').attr('src', '/static/admin/img/default.jpg');
                    }
                    $time = formatDate(data.data.last_login_time, true, 8, true);
                    $('#lastlogin').html($time);

                } else {
                    toastr.warining('哎哟喂,此人已丢失');
                }

            },
            error: function () {
                toastr.error('AJAX执行失败!!');
            }
        });
    }

    // 编辑用户AJAX
    function editAjax(id) {

        $.ajax({
            type: 'get',
            url: '/user/' + id + '/edit',
            dataType: 'json',
            success: function (data) {
                if (data.status) {

                    $('#inputName').val(data.nickname);
                    // 判定性别
                    if (data.sex == 1) {
                        $('#radioSex1').attr('checked', true);
                    } else if (data.sex == 2) {
                        $('#radioSex2').attr('checked', true);
                    } else {
                        $('#radioSex3').attr('checked', true);
                    }
                    // 判定头像
                    if (data.icon) {

                        $('#myIcon').attr('src', data.icon);

                    } else {
                        $('#myIcon').attr('src', '/static/admin/img/default.jpg');
                    }
                } else {
                    $('.modal-body').html('抱歉,服务器出差中');
                }


            },
            error: function () {
                toastr.error('AJAX执行失败');
            }
        });
    }

    // 保存编辑
    function updateAjax(info, id) {
        console.log(info);

        $.ajax({
            type: 'put',
            url: '/user/' + id,
            data: info,
            success: function (data) {
                if (data.status) {
                    toastr.success("修改成功");

                } else {
                    toastr.warning("没有任何修改");
                }
            },
            error: function () {
                toastr.error('AJAX执行失败!!');
            }

        });
    }


    // 用户状态切换
    $('.status-btn').click(function () {

        id = $(this).attr('data-id');
        status = $(this).attr('data-status');
        var data = {'id': id, 'status': status};
        // 找出对应按钮
        // console.log($(".status-btn[data-id ="+id+"]"));
        $.ajax({
            type: 'post',
            url: '/user/status',
            data: data,
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    if (status == 1) {
                        $(".status-btn[data-id =" + id + "]").removeClass('btn-info').addClass('btn-warning');
                        $(".status-btn[data-id =" + id + "]").text('已禁用');
                        $(".status-btn[data-id =" + id + "]").attr('data-status', 2);
                    } else {
                        $(".status-btn[data-id =" + id + "]").text('已激活');
                        $(".status-btn[data-id =" + id + "]").removeClass('btn-warning').addClass('btn-info');
                        $(".status-btn[data-id =" + id + "]").attr('data-status', 1);
                    }
                } else {
                    toastr.warning('更改失败');
                }
            },
            error: function () {
                toastr.error('ajax执行失败');
            }
        });
    });


    // 上传头像
    $("#inputFile").on("change", function () {

        //为文件上传添加change事件
        var fileM = document.querySelector("#inputFile");
        //获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组
        var fileObj = fileM.files[0];
        //创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。
        var formData = new FormData();
        formData.append('file', fileObj);

        $.ajax({
            type: 'post',
            url: '/user/pic',
            data: formData,
            // cache: false,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    // toastr.success(data.message);
                    // var path = "/uploads/" + data.save;
                    var path = 'http://' + data.data;
                    $('#myIcon').attr('src', path);
                    $("#inputFile").attr('data-img', path);

                } else {
                    toastr.warning(data.mesage);
                }
            },
            error: function () {
                toastr.error('AJAX执行失败');
            }
        });
    });


    /*
   * 时间戳转换日期
   * @param  <int>  unixTime    待时间戳(秒)
   * @param  <bool> isFull    返回完整时间(Y-m-d 或者 Y-m-d H:i:s)
   * @param  <bool> isCheckTime    true返回2015-07-05  false:2015-7-5
   * @param  <int>  timeZone   时区
   */
    function formatDate(unixTime, isFull=true, timeZone, isCheckTime=true) {
        if (typeof (timeZone) == 'number') {
            unixTime = parseInt(unixTime) + parseInt(timeZone) * 60 * 60;
        }
        var time = new Date(unixTime * 1000);
        var ymdhis = "";

        if (isCheckTime === true) {
            ymdhis += time.getUTCFullYear() + "-";
            ymdhis += formatDateCheckTime((time.getUTCMonth() + 1)) + "-";
            ymdhis += formatDateCheckTime(time.getUTCDate());
            if (isFull === true) {
                ymdhis += " " + formatDateCheckTime(time.getUTCHours()) + ":";
                ymdhis += formatDateCheckTime(time.getUTCMinutes()) + ":";
                ymdhis += formatDateCheckTime(time.getUTCSeconds());

            }
        } else {
            ymdhis += time.getUTCFullYear() + "-";
            ymdhis += (time.getUTCMonth() + 1) + "-";
            ymdhis += time.getUTCDate();
            if (isFull === true) {
                ymdhis += " " + time.getUTCHours() + ":";
                ymdhis += time.getUTCMinutes() + ":";
                ymdhis += time.getUTCSeconds();
            }
        }

        return ymdhis;
    }

    /*
     * 时间戳转换日期之检测对象是否小于10
     */
    function formatDateCheckTime(i) {
        if (i < 10) {
            i = "0" + i
        }
        return i
    }

    /**
     * 判断是否null
     * @param data
     */
    function isNull(data) {
        return (data == "" || data == undefined || data == null) ? "暂无" : data;
    }


</script>
{{/block}}